<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<style>

    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
        box-sizing: border-box;
    }
    clearfix::before,
    clearfix::after{
        content: '';
        display: block;
        clear: both;
    }
    input,button{
        outline: none;
    }
    html{
        font-size: 10px;
    }
    body{
        font-size: 1.4rem;
    }
    a{
        color: darkorange;
    }
    /*************************主体设计**************************************/
    /*主体*/
    #content{
        width: 50rem;
        /*height: 60rem;*/
        border: 0.1rem solid #cccccc;
        margin: 5rem auto;
        background: #e0e0e0;

    }
    /*头部*/
    /*#content .content-header{*/
    /*    border: 0.1rem solid blue;*/
    /*}*/
    #content .content-header a{

        height: 6rem;
        width: 50%;
        background-color: #ebebeb;
        color: #666666;
        display: inline-block;
        float: left;
        /*水平居中*/
        text-align: center;
        /*垂直居中*/
        line-height: 6rem;
        font-size: 1.6rem;
    }
    #content .content-header a.current{
        background-color: transparent;
        color: darkorange;
    }
    /*内容*/
    #content .content-body{
        /*background-color: red;*/
        padding: 4rem;
    }
    #content .content-body .dom{
        width: 100%;
        display: none;
    }
    #content .content-body .dom .s1{
        /*background-color: red;*/
        margin-bottom: 2rem;
    }
    #content .content-body .dom .s1 h4{
        color:black;
    }
    #content .content-body .dom .s1 input{
        width: 100%;
        height: 4rem;
        margin-top: 0.5rem;
        padding-left:0.5rem ;
        border-radius: 5px;
        border:1px solid #cccccc;
    }

    #content .content-body .dom .btn{
        width: 100%;
        height: 3.5rem;
        border: none;
        background-color: darkorange;
        color: white;
        font-size: 1.8rem;
        margin-bottom: 2rem;
        text-align: center;
        line-height: 3.5rem;
        border-radius: 5px;
        cursor:pointer;
    }
    /*#content .content-body .dom .dom-footer{*/
    /*    background-color: red;*/
    /*}*/
    #content .content-body .dom .dom-footer .login-another{
        /*background-color: red;*/
        color: #666666;
        margin-bottom: 2rem;
        text-align: center;
        line-height: 100%;
    }
    #content .content-body .dom .dom-footer .login-another span{
        margin: 0 0.5rem;
    }
    #content .content-body .dom .dom-footer .login-three{
        /*background-color: red;*/
        text-align: center;
        line-height: 100%;
        color: #666666;
        margin-top: 2rem;
    }
    #content .content-body .dom .dom-footer .login-three span{
        margin-bottom: 2rem;
        font-size: 1.2rem;
        position: relative;
    }
    /*创建字体前的线条*/
    #content .content-body .dom .dom-footer .login-three span::before{
        content: '';
        display: inline-block;
        width: 12rem;
        border: 1px solid #e0e0e0;
        position: absolute;
        top:50%;
        left: -125%;
    }
    /*创建字体后的线条*/
    #content .content-body .dom .dom-footer .login-three span::after{
        content: '';
        display: inline-block;
        width: 12rem;
        border: 1px solid #e0e0e0;
        position: absolute;
        top:50%;
        right: -125%;
    }

    #content .content-body .dom .dom-footer .login-three img{
        margin-top: 2rem;
        height: 3rem;
        width: 3rem;
        border-radius: 50%;
    }
    #content .content-body .dom .msg-code input{
        width: 49%;
    }
    #content .content-body .dom .msg-code input:last-child{
        color: #666666;
        cursor: pointer;
    }
    p#p1{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
    }
    p#p1>img{
        height: 95%;
        width: 100%;
        border: 0;

    }
    h1{
        padding-top: 50px;
        color: darkorange;.
    }
    p1{
        height:300px;
        width:300px;
        border:1px solid #333333;
        text-align:center;
        position:relative;

    }
    p{
        position:absolute;
        bottom:0px;
        padding:0px;
        margin:0px;
        font-size: 40px;
        font-weight:bold;
        color: darkorange
    }
    adv{
        position: absolute;
        height: 50px;
        text-align: center;
        line-height: 50px;
        width: 100%;
    }
</style>
<body>
<div style="background-color: black"></div>

<div>
    <h3 style="background-color: black;color: darkorange;padding-left: 50px;">易一直聘</h3>
</div>

<h1 align="center" style="margin-top: 20px" >管理员登录</h1>

<!--主体-->
<section id="content" >

    <!--内容-->
    <div class="content-body">
        <div class="dom" style="display: block">
            <form action="adminLogin" method="post">
                <div class="s1">
                    <h4>账号</h4>
                    <input type="text" name="username" placeholder="用户名/手机/邮箱">
                </div>
                <div class="s1">
                    <h4>密码</h4>
                    <input type="password" name="password" placeholder="请输入密码">
                </div>

                <input type="submit" value="登&nbsp;录" class="btn">
            </form>
            <div class="dom-footer">
                <div class="login-another">
                    <a href="user.jsp">普通用户</a>
                    <span>|</span>
                    <a href="companyUser.jsp">企业用户</a>
                </div>
                <div class="login-three">

                </div>
            </div>


        </div>

    </div>

    </div>

    <h1 style="color: red" align="center">${requestScope.adminLoginMsg}</h1>

    <div id="adv" style="text-align: center">
        <p>找工作，招人才，就来易一直聘</p>
    </div>
    <p id="p1"><img src="img/01.jpg"></p>
</section>
<script type="application/javascript" >
    window.onload=function () {
        let as=document.getElementsByClassName('content-header')[0].getElementsByTagName('a');
        let contents=document.getElementsByClassName("dom");
        for (let i=0;i<as.length;i++){
            let a=as[i];
            a.id=i;
            // 设置每个a标签的onclick事件
            a.onclick=function () {
                // 清楚所有标签的css设置，隐藏dom标签
                for(let j=0;j<as.length;j++){
                    as[j].className="";
                    contents[j].style.display="none";
                }
                // 设置当前标签样式及当前标签下的所有dom标签可见
                this.className='current';
                // 当前div可见
                contents[this.id].style.display='block';
            }
        }
    }
</script>
</body>
</html>